<template>
  <!-- 分类组件 -->
  <div class="classify-show">
    <div class="classify-wrap">
      <el-scrollbar  class="scroll-view" :wrapStyle="{}">
        <div class="list-wrap" v-if="ruleFormLocal.classifyStyle == 0">
          <div 
            :class="{list: true, active: index == 0}"
            v-for="(item,index) in classifyList" 
            :key="index"
          >
            {{item.title}}
          </div>
        </div>
        <div class="list-wrap-style2" v-if="ruleFormLocal.classifyStyle == 1">
          <div 
            :class="{list: true, active: index == 0}"
            :style="{
              color: index == 0 ? ruleFormLocal.selectedColorText : '#5b5b5b',
              background: index == 0 ? ruleFormLocal.selectedBgText : '#9c931'
            }"
            v-for="(item,index) in classifyList" 
            :key="index"
          >
            {{item.title}}
          </div>
        </div>
      </el-scrollbar>
    </div>
     <option-right v-if="dateFactory.activeBorder">
      <div class="option-wrap">
        <el-form :model="ruleFormLocal"   label-width="100px">
          <div class="edit-componet-title">
            分类
          </div>
          <el-form-item label="分类样式" prop="borderInputRadius">
            <el-radio-group v-model="ruleFormLocal.classifyStyle">
              <el-radio :label="0">样式1</el-radio>
              <el-radio :label="1">样式2</el-radio>
            </el-radio-group>
          </el-form-item>
          <template v-if="ruleFormLocal.classifyStyle == 1">
            <el-form-item label="选中文本颜色" prop="selectedColorText">
              <div class="border-wrap">
                <el-color-picker v-model="ruleFormLocal.selectedColorText" size="small" ></el-color-picker>
                <el-link type="primary" :underline="false" @click="ruleFormLocal.selectedColorText == '#fff'">重置</el-link>
              </div>
            </el-form-item>
            <el-form-item label="选中背景颜色" prop="selectedBgText">
              <div class="border-wrap">
                <el-color-picker v-model="ruleFormLocal.selectedBgText" size="small" ></el-color-picker>
                <el-link type="primary" :underline="false" @click="ruleFormLocal.selectedBgText == '#64c93f'">重置</el-link>
              </div>
            </el-form-item>
          </template>
        </el-form>
      </div>
    </option-right>
  </div>
</template>

<script>
export default {
  name: 'ClassifyGood',
  props: {
    dateFactory: Object,
    index: Number,
    diyData: Array,
  },
  data() {
    return {
      ruleFormLocal:this.dateFactory.ruleForm,
      classifyList: this.dateFactory.goodList,
    }
  },
  watch: {
    ruleFormLocal: {
      handler: function (newValue) {
        this.diyData[this.index].ruleForm = newValue
        if (this.ruleFormLocal.page == 'AboutWe') {
           this.$EventBus.$emit('diyFactoryAboutMe', this.diyData)
        } else if (this.ruleFormLocal.page == 'CurriculumSchedule') {
            this.$EventBus.$emit('diyFactoryCurriShe', this.diyData)
        } else if (this.ruleFormLocal.page == 'Home') {
           this.$EventBus.$emit('diyFactory', this.diyData)
        }else if (this.ruleFormLocal.page == 'ArticleDetail') {
           this.$EventBus.$emit('diyFactoryArticleDetail', this.diyData)
        }else if (this.ruleFormLocal.page == 'MyPage') {
           this.$EventBus.$emit('diyFactoryMyPage', this.diyData)
        }
      },
      deep: true,
    }
  },
  computed: {
    
  },
  mounted() {
    
  },
  methods: {

  },
}
</script>

<style lang="less" scoped>
  
  .classify-show {
		width: 100%;
		box-sizing: border-box;
    padding: 7px 10px;
    background: #fff;
		.classify-wrap {
			display: flex;
			align-items: center;
			.scroll-view {
				flex: 1;
				.list-wrap {
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					.list {
						flex-shrink: 0;
						font-size: 14px;
						color: #000;
						margin-right: 20px;
						padding-bottom: 5px;
						&.active {
							color: #295cf2;
						}
						&.active::after {
							content: '';
							display: block;
							width: 100%;
							height: 2px;
							background-color: #295cf2;
							position: relative;
							bottom: -2px;
						}
					}
        }
        // 分类样式2
        .list-wrap-style2 {
          display: flex;
					flex-wrap: nowrap;
          align-items: center;
          .list {
            flex-shrink: 0;
            padding: 2px 12px;
            border-radius: 20px;
            font-size: 14px;
            margin-right: 13px;
            border: 1px solid #eee;
            color: #696969;
            &.active {
              background: #64ca36;
              color: #fff;
              border: none;
            }
          }
        }
			}
		}
  }
  .option-wrap {
    .el-form  {
      .edit-componet-title {
        margin-bottom: 15px;
        padding-bottom: 7px;
        border-bottom: 1px solid #e5e5e5;
        font-size: 14px;
      }
      .el-form-item {
        .border-wrap {
          display: flex;
          align-items: center;
          .el-color-picker {
            margin-right: 12px;
          }
        }
        .side {
          display: flex;
          align-items: center;
          align-items: center;
          .el-slider {
            flex: 1;
          }
          &> span {
            margin-left: 14px;
          }
        }
      }
    }
    

  }
</style>